<div class="layui-fluid">
    <div class="layui-card">
    <#--页面头部标题-->
        <div class="layui-card-header">
            教室信息管理
        </div>
    <#--表格-->
        <div class="layui-card-body">
        <#--表格上方的搜索按钮等-->
            <div class="layui-form-item">
                <div class="layui-inline">
                    <@shiro.hasPermission name="/classroom/add">
                        <a id="add" class="layui-btn layui-btn-normal" name="add_room_button">
                            <i class="layui-icon"></i>
                            <span>新增</span>
                        </a>
                    </@shiro.hasPermission>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 70px;">楼栋</label>
                    <div class="layui-input-inline">
                        <input name="search_roomBuildings" id="search_roomBuildings" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 70px;">房号</label>
                    <div class="layui-input-inline">
                        <input name="search_roomNumber" id="search_roomNumber" placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 70px;">全部字段</label>
                    <div class="layui-input-inline">
                        <input name="search_RoomAll" id="search_RoomAll" placeholder="请输入（优先级最高）" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn layui-btn-primary" onclick="room_search()">搜索</button>
                </div>
            </div>
        <#--表格-->
            <table class="layui-table" id="room_table" lay-filter="room_table2" name="room_table"></table>

        </div>
    </div>

    <script type="text/html" id="indexTpl" name="tableIndex">
        {{d.LAY_TABLE_INDEX+1}}
    </script>
    <script type="text/html" id="barDemo" name="edit_del">
        <@shiro.hasPermission name="/classroom/update">
            <button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        </@shiro.hasPermission>
        <@shiro.hasPermission name="/classroom/del">
            <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</button>
        </@shiro.hasPermission>
    </script>
</div>

<script>

    var baseUrl = $("script[baseUrl]").attr('baseUrl');

    var tableid = $("[name='room_table']").attr('id');
    var tablefilter = $("[name='room_table']").attr('lay-filter');
    var tableIndex = $("[name='tableIndex']").attr('id');
    var edit_del = $("[name='edit_del']").attr('id');


    layui.use(['jquery', 'layer', 'table'], function () {
        var layer = layui.layer, table = layui.table;

        // 获取设备
        var deviceData = null;
        $.get(baseUrl + "/device/getDevice", function (data) {
            deviceData = data;
        });

        //让层自适应iframe
        $("[name='add_room_button']").on('click', function () {
            var index = layer.open({
                type: 2,
                content: baseUrl + '/classroom/goAdd',
                area: ['600px', '400px'],
                title: ['添加教室信息', 'font-size:18px;'],
                maxmin: false,
                end: function () {
                    table.reload(tableid, {});
                }
            });
            parent.layer.iframeAuto(index);
        });

        //表格渲染
        table.render({
            elem: '#' + tableid,
            url: baseUrl + '/classroom/getStudentPage',
            method: 'post',
            page: {layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']},
            cellMinWidth: 80,//全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cols: [[
                {field: '', align: 'center', width: 70, title: '序号', toolbar: '#' + tableIndex},
                {field: 'roomBuilding', title: '楼栋', width: 110, align: 'center'},
                {field: 'roomNumber', title: '房间号', width: 110, align: 'center'},
                {
                    field: 'id', title: '房间设备', templet: function (d) {
                        var retStr = "";
                        if(deviceData.length === null){
                            $.get(baseUrl + "/device/getDevice", function (data) {
                                deviceData = data;
                            });
                        }
                        for (var j = 0; j < deviceData.length; j++) {
                            if (d.id === deviceData[j].deviceClassroom) {
                                // return classroomData[j].roomBuilding;
                                retStr += '<span class="layui-badge-rim" style="font-size: 14px">' + deviceData[j].deviceName + '</span> ';
                            }
                        }
                        return retStr;
                        // return '<span class="layui-badge-rim">空调</span><span class="layui-badge-rim">洗衣机</span>';
                        // return '<span class="layui-badge-rim">空调空调空调空调空调空调空调</span> <span class="layui-badge-rim">洗衣机洗衣机洗衣机洗衣机洗衣机洗衣机洗衣机</span>';
                    }
                },
                {field: 'roomRemark', title: '备注', width: 200},
                {field: 'createTime', title: '添加时间', width: 200},
                {field: 'right', align: 'center', width: 150, toolbar: '#' + edit_del, title: '操作'}
            ]]
        });

        //监听修改按钮
        table.on('tool(' + tablefilter + ')', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                // 编辑
                var index = layer.open({
                    type: 2,
                    content: baseUrl + '/classroom/goUpdate?id=' + data.id,
                    area: ['600px', '400px'],
                    title: ['修改教室信息', 'font-size:18px;'],
                    maxmin: false,
                    end: function () {
                        table.reload(tableid, {});
                    }
                });
                parent.layer.iframeAuto(index);

            } else if (obj.event === 'del') {
                layer.confirm('真的要删除此教室信息吗？<br>楼栋：' + data.roomBuilding + " 门牌号：" + data.roomNumber, function (index) {
                    // 删除方法
                    $.post(baseUrl + "/classroom/del", {"id": data.id}, function (data) {
                        if (data.status === 200) {
                            layer.msg(data.message, {icon: 1, time: 1000});
                            layer.close(index);
                            table.reload(tableid, {});
                        } else {
                            layer.msg(data.message, {icon: 0, time: 1000});
                            layer.close(index);
                        }
                    });
                });
            }
        });
    });

    //监听搜索按钮点击事件
    function room_search() {
        var table_room = layui.table;
        var search_roomBuildings = $('#search_roomBuildings').val();
        var search_roomNumber = $('#search_roomNumber').val();
        var search_RoomAll = $('#search_RoomAll').val();
        table_room.reload(tableid, {
            where: {
                roomBuildings: search_roomBuildings,
                roomNumber: search_roomNumber,
                RoomAll: search_RoomAll
            }
            , page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }
</script>

